{extend name="layout/main" /}

{block name="style"}
<style>
    .filter-bar {
        background: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .filter-form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        align-items: end;
    }
    
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .form-group label {
        font-size: 12px;
        color: #666;
        font-weight: 500;
    }
    
    .form-control {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
    }
    
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .stat-item {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .stat-number {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .stat-label {
        color: #666;
        font-size: 14px;
    }
    
    .table-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .table th,
    .table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
    }
    
    .table tbody tr:hover {
        background: #f8f9fa;
    }
    
    .action-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        color: white;
    }
    
    .action-login { background: #3498db; }
    .action-approve { background: #27ae60; }
    .action-reject { background: #e74c3c; }
    .action-delete { background: #e67e22; }
    .action-clear { background: #9b59b6; }
    .action-default { background: #95a5a6; }
    
    .description-cell {
        max-width: 300px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 10px;
    }
    
    .pagination a,
    .pagination span {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        color: #333;
    }
    
    .pagination a:hover {
        background: #f8f9fa;
    }
    
    .pagination .current {
        background: #3498db;
        color: white;
        border-color: #3498db;
    }
    
    .clear-panel {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    @media (max-width: 768px) {
        .filter-form {
            grid-template-columns: 1fr;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        .description-cell {
            max-width: 150px;
        }
    }
</style>
{/block}

{block name="breadcrumb"}
<span class="breadcrumb-item">首页</span>
<span class="breadcrumb-item active">操作日志</span>
{/block}

{block name="content"}
<!-- 操作统计 -->
{if !empty($action_stats)}
<div class="stats-bar">
    {volist name="action_stats" id="stat"}
    <div class="stat-item">
        <div class="stat-number" style="color: #3498db;">{$stat.count}</div>
        <div class="stat-label">{$stat.action}</div>
    </div>
    {/volist}
</div>
{/if}

<!-- 日志清理面板 -->
<div class="clear-panel">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>
            <strong>日志清理</strong>
            <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">定期清理过期日志可以释放存储空间</p>
        </div>
        <div style="display: flex; gap: 10px; align-items: center;">
            <select id="clearDays" class="form-control" style="width: 120px;">
                <option value="7">7天前</option>
                <option value="30" selected>30天前</option>
                <option value="90">90天前</option>
                <option value="180">180天前</option>
            </select>
            <button class="btn btn-warning" onclick="clearLogs()">清理日志</button>
        </div>
    </div>
</div>

<!-- 筛选栏 -->
<div class="filter-bar">
    <form class="filter-form" method="get">
        <div class="form-group">
            <label>操作类型</label>
            <select name="action" class="form-control">
                <option value="">全部操作</option>
                <option value="login" {if $action == 'login'}selected{/if}>登录</option>
                <option value="approve_merchant" {if $action == 'approve_merchant'}selected{/if}>审核通过</option>
                <option value="reject_merchant" {if $action == 'reject_merchant'}selected{/if}>审核拒绝</option>
                <option value="delete_merchant" {if $action == 'delete_merchant'}selected{/if}>删除商户</option>
                <option value="clear_log" {if $action == 'clear_log'}selected{/if}>清理日志</option>
            </select>
        </div>
        <div class="form-group">
            <label>操作人员</label>
            <input type="text" name="admin_name" class="form-control" placeholder="管理员用户名" value="{$admin_name}">
        </div>
        <div class="form-group">
            <label>开始日期</label>
            <input type="date" name="date_start" class="form-control" value="{$date_start}">
        </div>
        <div class="form-group">
            <label>结束日期</label>
            <input type="date" name="date_end" class="form-control" value="{$date_end}">
        </div>
        <div class="form-group">
            <button type="submit" class="btn">搜索</button>
        </div>
        <div class="form-group">
            <a href="/admin/log" class="btn" style="background: #95a5a6;">重置</a>
        </div>
    </form>
</div>

<!-- 日志列表 -->
<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>操作类型</th>
                <th>操作人员</th>
                <th>操作描述</th>
                <th>IP地址</th>
                <th>操作时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name="logs" id="log"}
            <tr>
                <td>{$log.id}</td>
                <td>
                    {php}
                        $actionMap = [
                            'login' => '管理员登录',
                            'add_admin' => '添加管理员',
                            'edit_admin' => '编辑管理员',
                            'delete_admin' => '删除管理员',
                            'change_admin_status' => '修改管理员状态',
                            'approve_merchant' => '审核通过商户',
                            'reject_merchant' => '审核拒绝商户',
                            'delete_merchant' => '删除商户',
                            'clear_log' => '清理日志',
                        ];
                        $actionText = isset($actionMap[$log['action']]) ? $actionMap[$log['action']] : $log['action'];
                        $actionClass = 'action-default';
                        if (strpos($log['action'], 'login') !== false) $actionClass = 'action-login';
                        elseif (strpos($log['action'], 'add') !== false) $actionClass = 'action-add';
                        elseif (strpos($log['action'], 'edit') !== false) $actionClass = 'action-edit';
                        elseif (strpos($log['action'], 'delete') !== false) $actionClass = 'action-delete';
                        elseif (strpos($log['action'], 'status') !== false) $actionClass = 'action-status';
                        elseif (strpos($log['action'], 'approve') !== false) $actionClass = 'action-approve';
                        elseif (strpos($log['action'], 'reject') !== false) $actionClass = 'action-reject';
                        elseif (strpos($log['action'], 'clear') !== false) $actionClass = 'action-clear';
                    {/php}
                    <span class="action-badge {$actionClass}">{$actionText}</span>
                </td>
                <td>{$log.admin_name}</td>
                <td class="description-cell" title="{$log.description}">{$log.description}</td>
                <td>{$log.ip}</td>
                <td>{$log.create_time|date='Y-m-d H:i:s'}</td>
                <td>
                    <a href="/admin/log/detail/{$log.id}" class="btn btn-sm">详情</a>
                </td>
            </tr>
            {/volist}
        </tbody>
    </table>
    
    {if empty($logs)}
    <div style="text-align: center; padding: 40px; color: #666;">
        暂无日志数据
    </div>
    {/if}
    
    <!-- 分页 -->
    {if isset($logs) && $logs->total() > 0}
    <div class="pagination">
        {$logs->render()}
    </div>
    {/if}
</div>
{/block}

{block name="script"}
    // 清理日志
    function clearLogs() {
        const days = document.getElementById('clearDays').value;
        
        if (confirm(`确定要清理${days}天前的日志吗？此操作不可恢复！`)) {
            fetch('/admin/log/clear', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'days=' + days
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    alert(data.msg);
                    location.reload();
                } else {
                    alert('清理失败：' + data.msg);
                }
            })
            .catch(error => {
                alert('操作失败，请重试');
            });
        }
    }
    
    // 设置今天为默认结束日期
    document.addEventListener('DOMContentLoaded', function() {
        const dateEndInput = document.querySelector('input[name="date_end"]');
        if (dateEndInput && !dateEndInput.value) {
            const today = new Date().toISOString().split('T')[0];
            dateEndInput.value = today;
        }
    });
{/block}
